<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单向数据绑定和双向数据绑定</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <p>{{title}}</p>
      v-bind: <input 
      type="text"
       placeholder="数据绑定" 
     v-bind:value="title"
      ><br>
      v-model:<input
      type="text"
      placeholder="双向数据绑定"
      v-model:value="title"
  /><br />>
      v-model:<input 
      type="text"
      placeholder="双向数据绑定"
      v-model="title"
      ><br>
      v-model的原理: <input type="text"
        v-binf:value = "title"
        v-on:input = "title = $event.target.value"
      >
      <a v-bind:href="url">种子星球</a>
    </div>
 
    <script>
      const myData = {
        title:'vue222',
        url:'http://www.baidu.com',
      };

      const vm = new Vue({
        el:'#root',
        data: myData,
      });
    </script>
  </body>
</html>
